<template>
	<div class="item-container">
		<canvas id="myCanvas"></canvas>
		<div class="contailer-fluid">
			<div class="top-banner">
				<div class="text">
					<h1>从高质量的视频中学习</h1>
					<h1>WEB技术开发</h1>
				</div>
			</div>
		</div>	
		<div class="container-fluid main">
			<template v-for="list in lists">
				<row-grid :lists="list"></row-grid>
			</template>
		</div>
	</div>
</template>

<script>
	import RowGrid from "./RowGrid.vue"
	export default {
		data() {
			return {
				lists : null ,
				p : null ,
				s : 10,
			}
		},
		methods:{
			getData : function() {
				this.$http.get(`index?p=${this.p}&s=${this.s}`).then((e) => {
					var arr = [] ;
					var tmp = [];
					var i = 0 ;
					e.data.forEach((val ,index) => { 
						if( i == 3) {
							arr.push(tmp);
							tmp = [];
							i = 0 ;
						}
						tmp.push(val);
						i ++ ;
					})
					console.log(arr)
					this.lists = arr ;
				})
			}
		},
		components : {RowGrid},
		mounted:function(){
			this.getData()
		},
		created(){
			// this.p = this.$route.query.page || 0 ;
		},
		watch : {
			$route(){
				let P = 0 ;
				if(this.$route.query.p) {
					P = this.$route.query.p;
				}
				this.p = P ;
				this.getData()
			}
		},
		computed : {
			getSize() {
				return this.$store.state.size 
			}
		}
	}
</script>

<style type="text/sass" scoped>
	#myCanvas{
		z-index: -1;
		position: fixed;
		left: 0;
		top: 0;
		float: left;
	}
	.top-banner{
		width:100%;
		height:400px;
		text-align: center;
		color:#fff;
		padding-top: 80px;
	} 
	h1{
		font-size: 60px;  
	}
	.main{
		width:90%;
		margin:auth;
	}
	.boxmain{
		margin-top:15px;
	}
	.boxbody{
		cursor: pointer;
	}
	@media screen and (max-width:768px){
	   .boxbody{
			margin-top:40px;
		}
	}
	
</style>